<template>
  <div>
    <el-dialog
      title="业务系统授权"
      :visible.sync="visible"
      v-if="visible"
      width="800px"
      :before-close="handleClose"
      center
      append-to-body
      ref="dialog"
    >
      <div class="member-index tx-list-table">
        <el-table :data="tableData" :row-class-name="tableRowClassNameInit">
          <el-table-column
            prop="businessName"
            label="业务系统"
            width="200"
          ></el-table-column>
          <el-table-column label="是否授权" width="90">
            <template #default="scope">
              {{
                scope.row?.authUserCodeDtos.filter((i) => i.ischecked)?.length >
                0
                  ? "是"
                  : "否"
              }}
            </template>
          </el-table-column>
          <el-table-column label="权限">
            <template #default="scope">
              <div style="display: flex; flex-wrap: wrap">
                <div
                  v-for="(item, index) in scope.row.authUserCodeDtos"
                  :key="index"
                  style="margin-right: 10px; padding: 1px 0px"
                >
                  <!-- <el-radio v-model="item.ischecked" :label="item.authCode">{{item.authName}}</el-radio> -->
                  <el-checkbox
                    v-model="item.ischecked"
                    @change="
                      chekcboxChange($event, scope.$index, item.authCode)
                    "
                    >{{ item.authName }}</el-checkbox
                  >
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose()" :disabled="loading">取消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm()"
          :disabled="loading"
          v-loading.fullscreen.lock="loading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TxTableInput from "@/components/tx/tx-form/TxTableInput.vue";
// 内设机构
export default {
  components: { TxTableInput },
  name: "nsjg-ywsc",
  data() {
    return {
      action: "",
      visible: false,
      tableData: null,
      loading: false,
      row: "",
    };
  },
  mounted() {
    // this.loadTable();
  },
  computed: {
    disabledEdit() {
      return function (phone) {
        return (
          this.$userInfo.phone == phone &&
          ["1000000007", "1000000015", "1000000016"].includes(
            this.getParameter("menuId")
          )
        );
      };
    },
  },
  methods: {
    // 编辑
    handleEdit($scope, index) {
      this.row = $scope.row;
      let data = {
        body: {
          // orgName: this.table.query.orgName,
          // name: this.table.query.name,
          menuID: this.getParameter("menuId"),
          areaCode: this.$userInfo.areaCode,
          phone: $scope.row.phone,
          areaName: "",
          orgId: this.$currentUserInfo?.orgId || this.$userInfo.orgId,
          authPhone: this.$currentUserInfo?.phone || this.$userInfo.phone,
        },
      };
      this.$api.BaController.authList(data, (res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.visible = true;
        }
      });
    },
    // 保存
    handleConfirm($scope) {
      let data = {
        body: {
          authUserName: this.$currentUserInfo?.name || this.$userInfo.name,
          deptName: this.row.workUnit,
          areaCode: this.row.areaCode,
          orgName: this.row.orgName,
          phone: this.row.phone,
          areaName: this.row.areaName,
          deptId: this.row.superiorOrg,
          userName: this.row.name,
          authPhone: this.$currentUserInfo?.phone || this.$userInfo.phone,
          orgId: this.row.orgId,
          authUserDtos: this.tableData,
        },
      };
      // 未有业务系统数据，则不用调用接口保存，直接关闭弹窗
      if (!this.tableData?.length) {
        this.visible = false;
        this.loading = false;
        return false;
      }

      this.loading = true;
      this.$api.BaController.update(data, (res) => {
        if (res.code == 0) {
          // this.$emit("update");
          this.$message.success("保存成功");
          this.visible = false;
          this.loading = false;
        }
      }).catch((res) => {
        this.visible = false;
        this.loading = false;
      });
    },
    // 保存
    SubmitEvent($scope) {
      $scope.row.$action = "view";
      // let { id, name} = this.form.record;
      // this.ysjgData.filter(i=>i.name==name)
      // this.table.loading = false;
    },
    // 取消
    handleClose() {
      this.visible = false;
    },
    chekcboxChange($event, systemId, code) {
      // 勾选值，系统id索引，角色id，单选勾选，其它的选项设置为false
      if ($event) {
        this.tableData[systemId].authUserCodeDtos
          .filter((item) => item.authCode != code)
          .forEach((item) => (item.ischecked = false));
      }
    },
    tableRowClassNameInit({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scope>
.member-index {
  .el-form-item {
    margin-bottom: 0px !important;
  }
  .tx-list-query {
    margin: 0px;

    // border: 2px solid $c-bd-menu;
  }

  .tx-block {
    width: auto;
    margin: 15px 0px;
    background-color: $c-bg-query;
    border: 1px solid $c-bd-content;
  }

  .el-table td.el-table__cell {
    padding: 8px 0px 8px 0px;
    div {
      margin-bottom: 0px;
    }
    .cell > span {
      display: block;
      padding-bottom: 13px;
      line-height: 30px;
    }
    .tx-table-column-action {
      display: block;
      padding-bottom: 10px;
    }

    .el-input__inner {
      height: 30px;
      line-height: 30px;
      padding: 0px 5px;
    }
    .el-form-item {
      margin-bottom: 13px !important;
    }
    .el-form-item__content {
      line-height: 30px;
    }
    .el-form-item__error {
      padding-top: 0px;
    }
  }
}
.btnbox-right {
  display: flex;
  align-items: center;
  float: right;
  .tooltip {
    margin-left: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url("~@/assets/TeamAdministrator/icon_explain.png") no-repeat;
  }
}
</style>
